<template>
  <div class="interMgn">
    <GeminiScrollbar class="container" @ready="initScrollbar" :autoshow="true">
      <div class="table-header">
        <p>面试管理</p>
        <div class="search-bar">
          <div class="btn primary" @click="addInterShow = true">添加</div>
        </div>
      </div>
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>联系人</th>
            <th>面试时间</th>
            <th>联系电话</th>
            <th>联系邮箱</th>
            <th>面试地点</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="inter of tableData">
            <tr :key="inter.id">
              <td class="expend">
                <img @click="expend($event)" src="@/assets/img/u4210.png"/>
              </td>
              <td>{{ inter.name }}</td>
              <td>{{ inter.date + ' ' + inter.time }}</td>
              <td>{{ inter.tel }}</td>
              <td>{{ inter.email }}</td>
              <td>{{ inter.loc }}</td>
              <td>
                <a @click="modifyInterClicked(inter)">修改</a>
                <a @click="deleteInter(inter.id)">删除</a>
              </td>
            </tr>
            <tr :key="inter.id + 10000" style="display:none">
              <td class="middle-container" colspan="8">
                <div class="middle">
                  面试描述: {{ inter.desc }}
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </GeminiScrollbar>
    <footer>
      <Page @setCurPage="setCurPage" :curPage="curPage" :total="total" :pageSize="pageSize"></Page>
    </footer>
    <inter-mgn-dialog
      @close="modifyInterShow = false"
      @done="modifyInter"
      :dialogData="modifyInterData"
      title="修改部门信息"
      :show="modifyInterShow"
    ></inter-mgn-dialog>
    <inter-mgn-dialog
      @close="addInterShow = false"
      @done="addInter"
      :dialogData="{}"
      title="添加部门"
      :show="addInterShow"
    ></inter-mgn-dialog>
  </div>
</template>
<script>
/* eslint-disable no-param-reassign */
import Page from '@/components/Pages/index';
import InterMgnDialog from '@/components/Dialogs/interMgn';
import api from '@/api/interMgn';

async function queryBInterview(curPage) {
  const tableData = [];
  const params = new URLSearchParams();
  params.append('companyId', sessionStorage.getItem('companyId'));
  // params.append('name', this.name);
  params.append('rows', 10);
  params.append('page', curPage);
  const response = await api.queryBInterviewApi(params);
  const datas = response.data.rows;
  const total = response.data.total;
  for (let i = 0; i < datas.length; i += 1) {
    tableData.push({
      id: datas[i].businessId,
      name: datas[i].linkMan,
      date: datas[i].interviewDate.split(' ')[0],
      time: datas[i].interviewDate.split(' ')[1],
      tel: datas[i].linkPhone,
      email: datas[i].linkEmail,
      loc: datas[i].linkAddress,
      desc: datas[i].description,
    });
  }
  return [total, tableData];
}

export default {
  name: 'InterMgn',
  data() {
    return {
      name: '',
      tableData: [
        // {
        //   id: '10000',
        //   name: '李博一心',
        //   date: '2019-4-5',
        //   time: '23:00',
        //   tel: '17612082048',
        //   email: 'lbj@sd.com',
        //   loc: '望天楼',
        //   desc: '犹豫, 就会败北',
        // },
        // {
        //   id: '10001',
        //   name: '李博二心',
        //   date: '2019-4-6',
        //   time: '23:00',
        //   tel: '17612082048',
        //   email: 'lbj@sd.com',
        //   loc: '望天楼',
        //   desc: '犹豫, 就会败北',
        // },
        // {
        //   id: '10002',
        //   name: '李博三心',
        //   date: '2019-4-7',
        //   time: '23:00',
        //   tel: '17612082048',
        //   email: 'lbj@sd.com',
        //   loc: '望天楼',
        //   desc: '犹豫, 就会败北',
        // },
        // {
        //   id: '10003',
        //   name: '李博四心',
        //   date: '2019-4-8',
        //   time: '23:00',
        //   tel: '17612082048',
        //   email: 'lbj@sd.com',
        //   loc: '望天楼',
        //   desc: '犹豫, 就会败北',
        // },
        // {
        //   id: '10004',
        //   name: '李博五心',
        //   date: '2019-4-9',
        //   time: '23:00',
        //   tel: '17612082048',
        //   email: 'lbj@sd.com',
        //   loc: '望天楼',
        //   desc: '犹豫, 就会败北',
        // },
      ],

      curPage: 1,
      total: 1000,
      pageSize: 10,

      addInterShow: false,
      modifyInterShow: false,
      modifyInterData: null,

      scrollObj: null,
    };
  },
  beforeRouteEnter(from, to, next) {
    if (sessionStorage.getItem('userToken') === null || sessionStorage.getItem('loginType') !== '3') {
      next({ path: '/login' });
    }
    queryBInterview(1).then((res) => {
      next((vm) => {
        vm.$emit('route-switch', window.location.href.split('/').pop());
        vm.tableData = [...res[1]];
        vm.total = res[0];
      });
    });
  },
  methods: {
    async setCurPage(page) {
      this.curPage = page;
      const res = await queryBInterview(page);
      this.tableData = [...res[1]];
      this.total = res[0];
    },
    expend(e) {
      if (e.currentTarget.className === '') {
        e.currentTarget.className = 'rotate';
      } else {
        e.currentTarget.className = '';
      }
      const display = e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display;
      if (display === 'none') {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = '';
      } else {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = 'none';
      }
      this.scrollObj.update();
    },
    modifyInterClicked(inter) {
      this.modifyInterShow = true;
      this.modifyInterData = { ...inter };
    },
    modifyInter(inter) {
      // console.log(inter);
      this.modifyInterShow = false;
      const params = new URLSearchParams();
      let newdate = new Date(inter.date).toLocaleDateString('en-US').split('/');
      newdate.unshift(newdate.pop());
      newdate = newdate.join('-');
      params.append('interviewDate', `${newdate} ${inter.time}`);
      params.append('linkMan', inter.name);
      params.append('linkPhone', inter.tel);
      params.append('linkEmail', inter.email);
      params.append('linkAddress', inter.loc);
      params.append('description', inter.desc);
      params.append('companyId', this.$store.getters['user/getUserInfo'].companyId);
      api.updateApi(inter.id, params).then(async (response) => {
        if (response.data.code === 200) {
          const res = await queryBInterview(this.curPage);
          this.tableData = [...res[1]];
          this.total = res[0];
          this.$alert('修改成功');
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    addInter(inter) {
      // console.log(inter);
      this.addInterShow = false;
      const params = new URLSearchParams();
      let newdate = new Date(inter.date).toLocaleDateString('en-US').split('/');
      newdate.unshift(newdate.pop());
      if (newdate[1].length < 2) {
        newdate[1] = `0${newdate[1]}`;
      }
      if (newdate[2].length < 2) {
        newdate[2] = `0${newdate[2]}`;
      }
      newdate = newdate.join('-');
      params.append('interviewDate', `${newdate} ${inter.time}`);
      params.append('linkMan', inter.name);
      params.append('linkPhone', inter.tel);
      params.append('linkEmail', inter.email);
      params.append('linkAddress', inter.loc);
      params.append('description', inter.desc);
      params.append('companyId', this.$store.getters['user/getUserInfo'].companyId);
      api.addApi(params).then(async (response) => {
        if (response.data.code === 200) {
          const resp = await queryBInterview(this.curPage);
          this.tableData = [...resp[1]];
          this.total = resp[0];
          this.$alert('添加成功');
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    deleteInter(interId) {
      this.$confirm('确定要删除面试吗?', (res) => {
        if (res) {
          api.deleteApi(interId).then(async (response) => {
            if (response.data.code === 200) {
              const resp = await queryBInterview(this.curPage);
              this.tableData = [...resp[1]];
              this.total = resp[0];
              this.$alert('删除成功');
            } else {
              this.$alert(response.data.message);
            }
          });
        }
      });
    },

    initScrollbar(bar) {
      this.scrollObj = bar;
    },
  },
  components: {
    Page,
    InterMgnDialog,
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.comm.less);
@import url(../../../../static/style/site.vars.less);

.interMgn {
  box-shadow: 0 3px 6px rgba(6,0,1,.05);
  &>.container {
    height: 701px;
    background: #fff;
    .table-header {
      position: sticky;
      top: 0;
    }
    .middle-container {
      box-sizing: border-box;
      padding: 10px;
      padding-left: 40px;
      background: rgb(238, 238, 238);
      height: 100px;
      // display: none;
      .middle {
        text-align: left;
      }
    }
  }
  & > footer {
    padding: 20px 0 20px 0;
    // border: 1px rgba(0, 97, 207, 0.3) solid;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>
